<template>
    <div>
        <p :style="{ color: colorAtt, fontSize: fontAtt }">demo</p>
        <p :style="styleObj">demo</p>
        <p :style="[styleObj, styleObj]">demo</p>

    </div>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    const colorAtt = ref('red') 
    const fontAtt = ref('40px')
    const styleObj = reactive({
        color: 'red',
        fontSize: '16px'
    })

</script>

<style scoped></style>